<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '登录',
  },
}
</route>

<template>
  <view
    class="h-full bg-gradient-to-b from-orange-50 via-gray-50 to-gray-100 flex flex-col items-center px-4 relative overflow-hidden"
  >
    <wd-navbar title="登录" left-arrow safeAreaInsetTop fixed placeholder>
      <template #capsule>
        <wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />
      </template>
    </wd-navbar>
    <!-- 背景装饰图标 -->
    <view class="absolute inset-0 overflow-hidden pointer-events-none">
      <view class="absolute top-0 right-0 w-32 h-32 bg-orange-200/20 rounded-full blur-3xl"></view>
      <view class="absolute bottom-0 left-0 w-40 h-40 bg-blue-200/20 rounded-full blur-3xl"></view>
      <view
        class="i-carbon-basketball text-6xl text-orange-100 absolute top-20 left-10 animate-float"
      ></view>
      <view
        class="i-carbon-user-activity text-5xl text-orange-100 absolute top-40 right-12 animate-float-delay-2"
      ></view>
      <view
        class="i-carbon-location text-4xl text-orange-100 absolute bottom-40 left-8 animate-float-delay-1"
      ></view>
      <view
        class="i-carbon-calendar text-5xl text-orange-100 absolute bottom-20 right-10 animate-float-delay-3"
      ></view>
      <view
        class="i-carbon-medal text-4xl text-orange-100 absolute top-60 left-20 animate-float-delay-2"
      ></view>
    </view>

    <!-- Logo区域 -->
    <view class="mt-20 mb-12 text-center animate-fade-in relative">
      <view class="i-carbon-basketball text-7xl text-orange-500 mb-4 animate-bounce-in"></view>
      <text class="text-2xl font-bold text-gray-800 block">体育馆预订系统</text>
      <view class="mt-2 flex items-center justify-center gap-1 text-sm text-gray-500">
        <view class="i-carbon-time"></view>
        <text>便捷预订</text>
        <view class="i-carbon-dot-mark mx-1"></view>
        <view class="i-carbon-favorite"></view>
        <text>畅享运动</text>
      </view>
    </view>

    <!-- 登录区域 -->
    <view
      class="w-full max-w-md mx-4 box-border bg-white/90 backdrop-blur rounded-2xl shadow-xl p-8 animate-slide-up relative"
    >
      <!-- 卡片装饰 -->
      <view
        class="absolute -top-6 -right-6 w-12 h-12 bg-orange-500/10 rounded-full animate-pulse"
      ></view>
      <view
        class="absolute -bottom-4 -left-4 w-8 h-8 bg-orange-500/10 rounded-full animate-pulse delay-300"
      ></view>

      <!-- 欢迎文本 -->
      <view class="text-center mb-8">
        <text class="text-xl font-semibold text-gray-800 block">欢迎登录</text>
        <text class="mt-2 block text-sm text-gray-500">
          <view class="i-carbon-user-profile inline-block mr-1"></view>
          请使用手机账号登录系统
        </text>
      </view>

      <!-- 登录按钮 -->
      <button
        :open-type="agreement ? 'getPhoneNumber' : 'error'"
        class="w-full bg-gradient-to-r from-orange-500 to-orange-400 text-white py-2 rounded-full flex items-center justify-center gap-2 transform transition-all duration-300 hover:scale-105 active:scale-95 shadow-lg hover:shadow-orange-200"
        @click="loginHandle"
        @getphonenumber="getPhoneNumberHandle"
      >
        <!-- <view class="i-carbon-logo-wechat text-xl animate-bounce-mini text-white"></view> -->
        <text class="font-medium text-white">手机号快捷登录</text>
      </button>

      <!-- 底部提示 -->
      <view class="mt-6 flex items-center justify-center text-xs text-gray-400">
        <wd-checkbox v-model="agreement" class="mr-2">
          <text>登录即表示同意</text>
        </wd-checkbox>
        <text class="text-orange-500 hover:underline cursor-pointer transition-colors">
          《服务条款》
        </text>
        和
        <text class="text-orange-500 hover:underline cursor-pointer transition-colors">
          《隐私政策》
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { login, getPhoneByCode, updateKhInfo } from '@/service/my/my'
import { useUserStore } from '@/store/user'
const fromcode = ref({
  jscode: '',
})
const userStore = useUserStore()

const agreement = ref(false)
console.log(1111)

const loginHandle = async () => {
  if (!agreement.value) {
    await uni.showToast({
      title: '请阅读并勾选页面协议',
      icon: 'none',
    })
  }
}

// 微信登录
const getPhoneNumberHandle = ({ detail }) => {
  if (detail.errMsg === 'getPhoneNumber:ok') {
    uni.showLoading({
      title: '登录中...',
      mask: true,
    })
    uni.login({
      success: function (res) {
        fromcode.value.jscode = res.code
        // 获取用户信息
        login(fromcode.value).then((res2) => {
          // 获取手机号
          getPhoneByCode(detail.code).then((params) => {
            // 修改用户信息
            updateKhInfo({
              ...res2.data,
              userPhone: params.data,
            })
              .then(({ code }) => {
                if (code === 0) {
                  userStore.setUserInfo({ ...res2.data, userPhone: params.data })
                  // 登录成功后跳转
                  uni.navigateBack({ delta: 1 })
                }
              })
              .finally(() => {
                uni.hideLoading() // 隐藏loading
              })
          })
        })
      },
      fail: function () {
        uni.hideLoading() // 隐藏loading
      },
    })
  } else {
    uni.showToast({
      title: '获取手机号失败，请重试',
      icon: 'none',
    })
  }
}

function handleBack() {
  uni.navigateBack({})
}

function handleBackHome() {
  uni.reLaunch({ url: '/pages/index/index' })
}
</script>

<style>
/* 动画类 */
.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-bounce-in {
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.animate-slide-up {
  animation: slideUp 0.6s ease-out;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-float-delay-1 {
  animation: float 3s ease-in-out infinite;
  animation-delay: 1s;
}

.animate-float-delay-2 {
  animation: float 3s ease-in-out infinite;
  animation-delay: 2s;
}

.animate-float-delay-3 {
  animation: float 3s ease-in-out infinite;
  animation-delay: 3s;
}

.animate-bounce-mini {
  animation: bounceMini 2s ease-in-out infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes bounceMini {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
</style>
